{% load static %}
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Notifier</title>
  <script type="text/javascript" src="{% static 'js/jquery-1.9.1.min.js' %}"></script>
  <link type="text/css" rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
  <style type="text/css">
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      padding-top: 70px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
    .footer hr {
      background-color: #cccccc;
      color: #cccccc;
    }
    .form {
      padding-bottom: 40px;
    }
    .panel-default {
      padding-top: 30px;
      border-color: #ffffff;
    }
    .panel-default > .panel-heading {
      background-color: #ffffff;
      border-bottom-color: #aaaaaa;
    }
    .panel-default > .panel-heading > h3 {
      padding-top: 0;
      line-height: 0;
      color: #428bca;
    }
    .list-group > p, .list-group > a {
      border-color: #ffffff;
    }
    .page-header {
      margin-top: 30px;
      margin-bottom: 10px;
      padding-top: 10px;
      color: #428bca;
      border-bottom-color: #aaaaaa;
    }
    .btn-default {
      border-color: #428bca;
      color: #428bca;
    }
    .modal-footer > .btn-default {
      color: #333333;
      border-color: #cccccc;
    }
  </style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Notifier for XDU</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li {% block nav_index %} {% endblock %}><a href="{% url 'index' %}">Home</a></li>
        <li {% block nav_notification %} {% endblock %}><a href="{% url 'view' %}">Notification</a></li>
        <li {% block nav_about %} {% endblock %}><a href="#">About</a></li>
        <li {% block nav_contact %} {% endblock %}><a href="#">Contact Us</a></li>
      </ul>
      <div class="navbar-right">
        <div class="navbar-text">
          {% if user %}
            <a href="#">{{ user }}</a>&nbsp;&nbsp;
            <a href="{% url 'user_logout' %}"><span class="glyphicon glyphicon-log-out"></span></a>
          {% else %}
            <a href="{% url 'user_login' %}">login&nbsp;<span class="glyphicon glyphicon-log-in"></span></a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container">
  {% block content %}
    <div class="row">
      <div class="col-md-8">
        {% block recent_nf %}{% endblock %}
        {% block nf_list %}{% endblock %}
        {% block pagination %}{% endblock %}
      </div>

      <div class="col-md-3 col-md-offset-1">
        {% if archive_dict_list %}
          <div class="row">
            <div class="panel panel-default">
              <div class="panel-heading"><h3>Archives</h3></div>
              <div class="list-group">
                {% for item in archive_dict_list|dictsortreversed:"month" %}
                  {% if archive_month == item.month %}
                    <p class="list-group-item active">{{ item.month }}<span class="badge">{{ item.num }}</span></p>
                  {% else %}
                    <a href="{% url 'archive' item.month %}" class="list-group-item">{{ item.month }}
                      <span class="badge">{{ item.num }}</span>
                    </a>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}

        {% if grade_dict_list %}
          <div class="row">
            <div class="panel panel-default">
              <div class="panel-heading"><h3>Grade</h3></div>
              <div class="list-group">
                {% for item in grade_dict_list|dictsortreversed:"grade" %}
                  {% if item.grade == grade.grade %}
                    <p class="list-group-item active">{{ item.grade }}<span class="badge">{{ item.num }}</span> </p>
                  {% else %}
                    <a href="{% url 'grade' item.grade %}" class="list-group-item">{{ item.grade }}
                      <span class="badge">{{ item.num }}</span>
                    </a>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
  {% endblock %}
</div><br><br><br><br>

<div class="footer">
  <div class="hr"><hr></div>
  <div class="container">
    <p class="text-center"><a href="#"><span class="glyphicon glyphicon-arrow-up"></span>Back to top</a></p>
    <p class="text-muted text-center">Copyright ©2014 All rights reserved.</p>
  </div>
</div>

{% block script %}{% endblock %}
</body>
</html>